import { Select } from 'antd';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';

export interface ZtSelectProps {
  option: { value: string; label: string }[];
  value: string | null;
  disabled: boolean;
}

export interface FowardZtSelect {
  getZtValue: () => string;
}

const ZtSelect = forwardRef((props: ZtSelectProps, ref) => {
  const { value: propsValue, option: propsOption, disabled } = props;

  const [value, setValue] = useState<string>();

  useEffect(() => {
    if (propsValue !== null && propsValue !== undefined) {
      setValue(propsValue);
    }
  }, [propsValue]);

  useImperativeHandle(
    ref,
    () => {
      return {
        getZtValue: () => {
          return value;
        },
      };
    },
    [value],
  );

  function handleChange(selectValue: string) {
    setValue(selectValue);
  }

  return (
    <>
      <Select
        value={value}
        style={{ width: 218}}
        onChange={handleChange}
        options={propsOption}
        disabled={disabled}
      />
    </>
  );
});

export default ZtSelect;
